<template>
	<z-paging ref="paging" v-model="listse" @query="gete">
		<template>
			<view class="d-p-r-30 d-back">
				<u-image :src="picture" width="100vw" height="1618rpx" @click="myvote"></u-image>
				<view class="d-flex-col flex-column" style="margin-top: 50rpx;">
					<view class="" style="display: flex;flex-direction: column;font-size: 70rpx;width: 100vw;">
						<view class=""
							style="display: flex;width: 40vw; justify-content: space-between;margin: auto;align-items: center;">
							<view class="" style="">
								确认打印
							</view>
							<view class="">
								制票
							</view>
						</view>
						<view class=""
							style="display: flex;width: 35vw; justify-content: space-between;margin: auto;align-items: center;margin-top: 20rpx;">
							<view class=""
								style="width: 80rpx;height: 80rpx;background-color: #FFF000;border-radius: 50%;">

							</view>
							<view class="" style="width: 25vw;height: 2rpx;background-color: black;">

							</view>
							<view class="" v-if="att"
								style="width: 80rpx;height: 80rpx;background-color:  #f1f1f1;;border-radius: 50%;">

							</view>
							<view class="" v-else
								style="width: 80rpx;height: 80rpx;background-color:  #FFF000;;border-radius: 50%;">

							</view>
						</view>
					</view>
					<view class=""
						style="width: 90%;height: 1000rpx;top: 50%;left: 5%;position: absolute;box-shadow: 0px 0px 53px 3px rgba(215,236,251,0.680000);">
						<!-- <view class="" style="margin-left: 20rpx;margin-top: 20rpx;">
							项目
						</view> -->
						<view class="list fav">
							<label class="item flex-between">
								<view class="flex-align">
									<view class="info1">
										<view class="name1">订单号</view>
										<view class="phone1">卡姓名</view>
										<view class="phone1">票卡类型</view>
										<view class="phone1">金额</view>
									</view>
								</view>
							</label>

						</view>
						<view class="list">
							<scroll-view class="scroll-view_H" scroll-y="true">
								<checkbox-group shape="circle" @change="radioChecked">
									<label class="item flex-between" v-for="(item, index) in listse" :key="index">
										<view class="flex-align">
											<!-- <u--image width="50" height="50" shape="circle" :src="item.head_img">
											</u--image> -->
											<view class="info">
												<view class="name">{{item.no}}</view>
												<view class="phone">{{item.name}}</view>
												<view class="phone" v-if="item.pro_type == 1">票</view>
												<view class="phone" v-if="item.pro_type == 2">卡</view>
												<view class="phone" v-if="item.pro_type == 3">场地</view>
												<view class="phone">{{item.orderItem.goods_price}}元</view>
											</view>
										</view>
										<view class="radioBox" style="padding-left: 34rpx">
											<checkbox color="#2f75fa" :value="item.no" :checked="true"
												style="transform: scale(1.8)" />
										</view>

									</label>
								</checkbox-group>
								<view style="width: 100%;height: 110rpx;">

								</view>
							</scroll-view>
						</view>
						<view class=""
							style="width: 90vw;height: 30vw;display: flex;flex-direction: row;justify-content: space-between; ">
							<view class="flex-row flex_s" style="margin-top: 7vw;margin-left: 2vw;">
								<view class="">
									<image src="../../static/13.png" mode="" style="width: 252rpx;height: 130rpx;"
										@click="fanhui">
									</image>
								</view>
								<view style="margin-left: 1vw;">
									<image src="../../static/14.png" mode="" style="width: 130rpx;height: 130rpx;"
										@click="shouye">
									</image>
								</view>
							</view>
							<view class="">
								<button type="button"
									style="background-color: #ffaa00;width: 34vw;height: 7vw;line-height: 7vw;font-size: 70rpx;margin-top: 7vw;"
									@click="clickhexiao">确认打印</button>
							</view>
						</view>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;position: absolute;bottom: 0;">
					<view class="">
						<u-image :src="picture2" width="50vw" height="536rpx"></u-image>
					</view>
					<view class="">
						<u-image :src="picture3" width="50vw" height="536rpx"></u-image>
					</view>
				</view>
			</view>
			<!-- <view class="chupiao1" style="" v-if="daying">

			</view>
			<view class="chupiao" style="" v-if="daying">
				<view class="chupiao_qingwu">
					请勿离开！
				</view>
				<view class="chupiao_qingwu1">
					票打印中，请稍候...
				</view>
				<view class="chupiao_qingwu2">
					正在打印您选择的第{{listse.length}}张票
				</view>
				<view class="chupiao_jindu">
					<u-line-progress :percentage="counter" :showText="false" height="30"
						activeColor="#1AA2BD"></u-line-progress>
				</view>
				<view class="chupiao_qingwu3">
					总共打印{{listse.length}}张票
				</view>
			</view> -->
			<view class="chupiao1_s" v-if="xiaopiao" @click="guanbi">
			
			</view>
			<view class="chupia_s" v-if="xiaopiao" >

				<view class="chupia_d" v-for="(item, index) in listse" :key="index" style="margin-top: 100rpx;" id="printMe" >
					<view style="font-size: 100rpx;font-weight: 600;">
						{{item.orderItem.venue_name}}
					</view>

					<view class="chupiao_qingwu3">
						日期：{{item.orderItem.create_at}}
					</view>
					<view class="chupiao_qingwu3">
						操作员：{{item.orderItem.purchase_route_name}}
					</view>
					<view class="" style="display: flex;flex-direction: row;margin-top: 40rpx;">
						<view class="chupiao_qingwu4" style="width: 15vw;">
							序
						</view>
						<view class="chupiao_qingwu4" style="width: 45vw;">
							消费项目
						</view>
						<view class="chupiao_qingwu4" style="width: 15vw;">
							单价
						</view>
						<view class="chupiao_qingwu4" style="width: 15vw;">
							数量
						</view>
					</view>
					<view class="" style="display: flex;flex-direction: row;">
						<view class="chupiao_qingwu4" style="width: 15vw;">
							1
						</view>
						<view class="chupiao_qingwu4" style="width: 45vw;">
							{{item.orderItem.goods_name}}
						</view>
						<view class="chupiao_qingwu4" style="width: 15vw;">
							{{item.orderItem.goods_price}}
						</view>
						<view class="chupiao_qingwu4" style="width: 15vw;">
							1
						</view>
					</view>

					<view class="" style="display: flex;flex-direction: row;margin-top: 40rpx;">
						<view class="chupiao_qingwu3">
							支付方式:元
						</view>
						<view class="chupiao_qingwu3" style="margin-left: 40rpx;">
							应收:{{item.orderItem.goods_price}}元
						</view>
						<view class="chupiao_qingwu3" style="margin-left: 40rpx;">
							实收:{{item.orderItem.order_money}}元
						</view>
					</view>

					<view class="chupia_sw" style="margin-top: 40rpx;">
						<uqrcode :ref="'uqrcode' + index" :canvas-id="'qrcode' + index" size="150" :value="item.no"
							:options="{ margin: 10 }"></uqrcode>
					</view>
				</view>
			</view>
		</template>
	</z-paging>
</template>

<script>
	import keyboard from '@/components/dt-keyboard/dt-keyboard.vue';
	import {
		getAllNoByUser
	} from '@/common/api';
	export default {
		components: {
			keyboard
		},
		data() {
			return {
				listse: [],
				picture: '../../static/2.png',
				picture1: '../../static/17.png',
				picture2: '../../static/1.png',
				picture3: '../../static/18.png',
				picture4: '../../static/6.png',
				picture6: '../../static/15.png',
				picture5: '../../static/9.png',
				show: false,
				failIf: false,
				showIf: true,
				dateActivs1: 1,
				dateActivs2: 2,
				dateActivs3: 3,
				court: '',
				countdown: 30,
				detailstyle: '',
				ids: [],
				types: '',
				counter: 0,
				limit: 100,
				daying: false,
				detailstyle: '',
				type: '',
				att: true,
				xiaopiao: false,
				cardno: '234788859745294',
				index: 0,
			};
		},
		onLoad(e) {
			console.log(e)
			this.type = e.type
			this.detailstyle = e.detailstyle
		},
		onShow() {
			this.gete()
		},
		mounted() {
			this.startCountdown();
		},
		mounted() {
			this.startCounter();
		},
		methods: {
			guanbi() {
				this.xiaopiao = false
			},
			myvote() {
				// uni.$u.route({
				// 	url: '/pages/myvote/myvote',
				// });
			},
			dyok() {


			},
			fanhui() {
				uni.$u.route({
					url: '/pages/login/login',
				});
			},
			shouye() {
				uni.$u.route({
					url: '/pages/index/index',
				});
			},
			async gete() {
				getAllNoByUser({
						// type: this.court,
						// no: this.detailstyle,
						type: this.type,
						no: '15365504091',
						output: 'json'
					})
					.then(res => {
						console.log(res, '222')
						this.listse = res
					})
			},
			startCounter() {
				// const timer = setInterval(() => {\
				// 	this.counter++;
				// 	if (this.counter === this.limit) {
				// 		clearInterval(timer);
				// 		// 达到上限后的操作
				// 	}
				// }, 50);
			},
			clickhexiao() {
				if (this.types == 0) {
					this.listse.forEach((item, index) => {
						this.ids.push(item.no)
					})
				}
				this.daying = true
				this.att = false
				this.xiaopiao = true
				setTimeout(() => {
					// window.print();
					 print(document.getElementById('printMe'))
				}, 2000)
				// uni.$u.route({
				// 	url: '/pages/code/code',
				// 	params: {}
				// });
				// console.log(this.ids)
			},
			// 项目
			radioChecked(e) {
				this.ids = []
				console.log(e)
				this.types = 1
				this.ids = e.detail.value
				console.log(this.ids)
			},
			startCountdown() {
				// const timer = setInterval(() => {
				// 	this.countdown--;
				// 	if (this.countdown === 0) {
				// 		clearInterval(timer);
				// 		// 倒计时结束后的操作
				// 	}
				// }, 1000);
			},
			qupiao() {
				uni.$u.route({
					url: '/pages/login/login',
					params: {}
				});
			},
			getPassword(e) {
				console.log(e, '222222')
				this.detailstyle = e
				// this.$refs.keyboard.clear()
				// if(e!='123456'){
				//     this.failIf = true
				//     this.$refs.keyboard.clear()
				//     setTimeout(()=>this.failIf = false,600)
				// }else{console.log('密码正确')}
			},
			backadd(e) {
				console.log(e, '132')
				this.detailstyle = e
			},
			queding() {
				console.log(this.detailstyle, '6666666')
				this.$refs.keyboard.clear()
				uni.$u.route({
					url: '/pages/login/login',
					params: {}
				});
			},
			clear(e) {
				this.detailstyle = ''
			},
			change(e) {
				console.log('change', e);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.picture66 {
		width: 846rpx;
		height: 314rpx;
		background-image: url('../../static/10.png');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 2vw;
	}

	.picture77 {
		width: 846rpx;
		height: 314rpx;
		background-image: url('../../static/11.png');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 2vw;
	}

	.picture88 {
		width: 846rpx;
		height: 314rpx;
		background-image: url('../../static/8.png');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 2vw;
	}

	.picture99 {
		width: 846rpx;
		height: 314rpx;
		background-image: url('../../static/7.png');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 2vw;
	}

	.picture100 {
		width: 846rpx;
		height: 314rpx;
		background-image: url('../../static/12.png');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 2vw;
	}

	.picture110 {
		width: 846rpx;
		height: 314rpx;
		background-image: url('../../static/16.png');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 2vw;
	}

	.d-back {
		height: 100%;
		height: 100vh;
		background: rgb(47, 127, 255);
	}

	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-white {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-xuxian {
		width: 100%;
		height: 1rpx;
		border-bottom: 1px dashed white;
		margin-top: 10rpx;
	}

	.d-bold {
		font-weight: bold;

	}

	.fav {
		background: linear-gradient(0deg, rgba(96, 187, 251, 0) 31%, #60BBFB 100%);
	}

	.list {
		.scroll-view_H {
			height: 33vw;
			overflow: hidden;
		}

		.item {
			margin-top: 30rpx;
			height: 9vw;
			width: 96%;
			border: 2rpx solid #60BBFB;
			padding: 0 10rpx;
			margin-left: 1.5%;

			.info {
				margin-left: 20rpx;
				flex-direction: row;
				display: flex;

				.name {
					font-size: 70rpx;
					font-weight: 500;
					color: #ffffff;
					margin-left: 40rpx;
					width: 20vw;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.phone {
					font-size: 70rpx;
					font-weight: 500;
					color: #ffffff;
					margin-left: 40rpx;
					width: 20vw;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.info1 {
				margin-left: 20rpx;
				flex-direction: row;
				display: flex;

				.name1 {
					width: 20vw;
					font-size: 80rpx;
					font-weight: 600;
					color: #ffffff;
					margin-left: 40rpx;
					text-align: center;
				}

				.phone1 {
					width: 20vw;
					font-size: 80rpx;
					font-weight: 600;
					color: #ffffff;
					margin-left: 40rpx;
					text-align: center;
				}
			}
		}
	}

	.chupiao1 {
		width: 100vw;
		height: 100%;
		background-color: #ffffff;
		position: absolute;
		z-index: 998;
		top: 0;
		opacity: 0.5;
	}

	.chupiao1_s {
		width: 100vw;
		height: 100%;
		background-color: #ffffff;
		position: absolute;
		z-index: 998;
		top: 0;
		opacity: 1;
	}

	.chupia_s {
		width: 100vw;
		height: auto;
		background: #eeeeee;
		// border: 1px solid;
		// background: linear-gradient(0deg, #0093C3 30%, rgba(68, 163, 252, 0.8) 100%);
		// border-image: linear-gradient(0deg, #0093C3, #6FDBFF, #0093C3) 10 10;
		position: absolute;
		z-index: 999;
		top: 25%;
		// left: 22%;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		// align-items: center;
		// padding: 10rpx 50rpx;
		font-size: 25rpx;
		// margin-left: 25vw;
		padding: 40rpx 20rpx 80rpx 20rpx;

		.chupia_d {
			margin-top: 5vw;

			.chupia_sw {
				display: flex;
				flex-direction: column;
				// justify-content: center;
				// align-items: center;
			}


			.chupiao_qingwu3 {
				margin-top: 1vw;
				font-size: 4vw;
				color: #000000;
				font-size: 60rpx;
			}

			.chupiao_qingwu4 {
				margin-top: 1vw;
				font-size: 4vw;
				color: #000000;
				font-size: 60rpx;
				width: 15vw;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: flex;
				// flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.chupiao {
		width: 552px;
		height: 450px;
		// background: #0086df;
		// border: 1px solid;
		background: linear-gradient(0deg, #0093C3 30%, rgba(68, 163, 252, 0.8) 100%);
		// border-image: linear-gradient(0deg, #0093C3, #6FDBFF, #0093C3) 10 10;
		position: absolute;
		z-index: 999;
		top: 40%;
		left: 24%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 相对父元素水平居中 */
		align-items: center;
		/*  子元素相对父元素垂直居中 */

		.chupiao_qingwu {
			font-size: 5vw;
			color: #FF0000;
		}

		.chupiao_qingwu1 {
			font-size: 4vw;
			color: #FEFEFE;
			margin-top: 1vw;
		}

		.chupiao_qingwu2 {
			font-size: 3vw;
			color: #FFFFFF;
			margin-top: 1vw;
		}

		.chupiao_qingwu3 {
			margin-top: 1vw;
			font-size: 4vw;
			color: #FFFFFF;
		}

		.chupiao_jindu {
			width: 70%;
			height: 4vw;
			margin-top: 2vw;
		}
	}
</style>